<!DOCTYPE HTML>
<html lang="zxx">

<head>
	<title>注册</title>
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />


	<!-- css files -->
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<!-- 引入elementui样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	<!-- Font-Awesome-Icons-CSS -->
	<!-- //css files -->

</head>

<body>
	<div class="main-bg" id="mian">
		<!-- title -->
		<h1>账户注册</h1>
		<!-- //title -->
		<div class="sub-main-w3">
			
			<!-- vertical tabs -->
			
				<div id="section1" class="section-w3ls">
					<div class="input">
						<span class="fa fa-user-o" aria-hidden="true"></span>
						<input type="text" v-model="registerdata.userName"  placeholder="姓名" name="name" required />
					</div>
					<div class="input">
						<span class="fa fa-genderless" aria-hidden="true"></span>
						<input type="text" v-model="registerdata.userGender"  placeholder="性别(男or女)" name="gender" required />
					</div>
					
					<div class="input">
						<span class="fa fa-birthday-cake" aria-hidden="true"></span>
						<input type="datetime" v-model="registerdata.userAge" placeholder="年龄" name="birth" required />
					</div>
					<div class="input">
						<span class="fa fa-id-card" aria-hidden="true"></span>
						<input type="text" v-model="registerdata.userCard" placeholder="身份证号" name="card" required />
					</div>
					<div class="input">
						<span class="fa fa-phone" aria-hidden="true"></span>
						<input type="text" v-model="registerdata.userPhone" placeholder="手机号" name="phone" required />
					</div>
					
					<div class="input">
						<span class="fa fa-key" aria-hidden="true"></span>
						<input type="password" v-model="registerdata.userPassword" placeholder="密码" name="password" required />
					</div>
					<div class="input">
						<span class="fa fa-key" aria-hidden="true"></span>
						<input type="password" v-model="confirmPassword" placeholder="确认密码" name="confirmPassword" required />
					</div>
					<div class="input">
						<span class="fa fa-address-book" aria-hidden="true"></span>
						<input type="text" v-model="registerdata.userAddress" placeholder="地址" name="address" required />
					</div>
					<button type="button" class="btn submit" style="border-radius:8px; display: inline; height: 45px; font-size: 15px; width: 140px;" @click="subminSignUp">提 交</button>
					<a href="./index.html"><button type="button" class="btn submit" style="border-radius:8px;display: inline; height: 45px; font-size: 15px; width: 140px;">返回登录</button></a>
				</div>
							
							
			
							
							
							
						
			<div class="clear"></div>
		</div>
		<!-- copyright -->
		<div class="copyright">
			<h2>Copyright &copy; 2021 版权所有| by
				<a href="#">No.11 Group</a>
			</h2>
		</div>
		<!-- //copyright -->
	</div>

</body>
<script>
new Vue({
    el:'#mian',
    data: {
        nowYear:new Date().getFullYear(),
		registerdata:{
			userName: "",
			userGender: "",
			userAge: "",
			userCard: "",
			userPhone: "",
			userPassword: "",
			userAddress: ""
		},
		confirmPassword: ""
    },
	methods: {
		subminSignUp() {
			var self = this;
			// console.log(self.registerdata.userPassword +"|||"+ self.confirmPassword + (self.registerdata.userPassword == self.confirmPassword))
			if(self.registerdata.userPassword == self.confirmPassword){
				axios.post("/user/register",self.registerdata).then( res=> {
				// var data = JSON.parse(res.data.data);
					if(res.data.success){
						self.$confirm("注册成功，请点击跳转登录").then(() => {
							window.location.href="index.html";
						}).catch( e=> {

						});
					}else {
						self.$message.error("注册失败：");
					}
				});
			}else{
				self.$message.warning("请检查两次输入密码是否一致！");
				return;
			}
		}
	}
});
</script>
<!-- //script -->

</html>
